<template>
    <el-dialog
        title="图片预览"
        :visible.sync="dialogVisible"
        append-to-body
        width="30%"
        :before-close="handleClose"
    >
        <div class="img-box">
            <img
                :src="imgUrl"
                alt=""
            >
        </div>
    </el-dialog>
</template>

<script>
export default {
	name: 'PreviewImg',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		imgUrl: {
			type: String,
			default: '',
			required: true
		}
	},
	data() {
		return {
			dialogVisible: this.value
		}
	},
	watch: {
		value(val) {
			if (val !== this.dialogVisible) {
				this.dialogVisible = val
			}
		},
		dialogVisible(val) {
			if (val !== this.value) {
				this.$emit('input', val)
			}
		}
	},
	methods: {
		handleClose() {
			this.dialogVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
.img-box {
	width: 100%;
	img {
		max-width: 100%;
	}
}
</style>